<template>
  <div class="more">
    <!-- 头部开始 -->
    <van-nav-bar
      title="全球优惠"
      arrow-left=""
      left-arrow
      @click-left="returnBefore"
    />
    <!-- 头部结束 -->

    <!-- tab栏开始 -->
    <van-dropdown-menu
      active-color="#2577e3"
      :overlay="false"
    >
      <van-dropdown-item
        v-model="getvalue1"
        :options="option1"
        @change="checkCountry"
      />
    </van-dropdown-menu>
    <!-- tab栏结束 -->

    <!-- 内容开始 -->
    <van-card
      v-for="item in array1"
      :key="item.id"
      :title="item.coupon_name"
      :thumb="item.coupon_ico_path"
      class="di1"
      @click="getCoupon(item.id)"
    >
      <template #tags>
        <van-tag
          plain
          type="danger"
          >{{ item.coupon_explain }}</van-tag
        >
      </template>
      <template #footer>
        <div class="img">
          <img
            src="../../xiaochen.img/tu1.png"
            alt=""
            class="tu1"
          />
          <p class="tiem-top">已抢</p>
          <p class="tiem-bottom">{{ item.coupon_recived_num }}</p>
          <img
            src="../../xiaochen.img/tu2.png"
            alt=""
            class="tu2"
          />
        </div>
      </template>
    </van-card>

    <!-- 内容结束 -->

    <!-- 底部开始 -->
    <Tabbar></Tabbar>
    <!-- 底部结束 -->
  </div>
</template>
<script>
import Tabbar from "../../components/tabbar"
import {mapState,mapMutations,mapGetters} from "vuex"
// import { getCountry } from '@/api';
export default {
  computed:{
    ...mapState({
      option1:(state)=>state.checkCountry.option1,
      value1:(state)=>state.checkCountry.value1,
      array1:(state)=>state.checkCountry.array1,
    }),
    ...mapGetters(['getvalue1']),
    getvalue1:{
      get(){
        return this.value1
      },
      set(val){
        // console.log(val);
      }
    }
  },
  components:{
    Tabbar
  },
  created() {
    this.checkCountry(0);
  },
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    checkCountry(value){
      this.$store.commit("checkCountry/checkCountry",value)
    },
    getCoupon(id){
      this.$store.commit('getCoupon/getCoupon',id)
    },
    ...mapMutations({
      returnBefore:{
        type:"returnBefore/returnBefore",
      },
    })
  },
};
</script>
<style lang="scss">
body {
  background-color: #fafafa;
}
.more {
  padding-bottom: 2000px;
  .van-nav-bar__arrow {
    font-size: 25px;
  }
  .van-nav-bar__content {
    // z-index: 9999;
    position: fixed;
    left: 0;
    top: 0px;
    z-index: 10001;
    width: 100%;
    height: 45px;
    background-color: #fff;
  }
  .van-dropdown-menu {
    margin-top: 45px;
  }
  .van-cell__title {
    text-align: center;
  }
  .van-cell {
    // display:block;
    width: 100%;
    justify-content: center;
    position: relative;
  }
  .van-cell__title,
  .van-cell__value {
    text-align: center;
    flex: none;
  }
  .van-cell__value {
    position: absolute;
    .van-icon {
      margin-left: 90px;
    }
  }
  .van-card__title {
    width: 100px;
    font-size: 14px;
    margin: 5px 0;
  }
  .van-popup {
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 99999;
    width: 100%;
  }
  .van-tag--danger.van-tag--plain {
    font-size: 16px;
    width: 162px;
    background-color: #fff4ec;
  }
  .van-tag--plain::before {
    border: none;
  }
  .van-card__content {
    -webkit-flex: 0;
    flex: 0;
    display: block;
  }
  .van-card:not(:first-child) {
    margin-top: 12px;
    background-color: #fff;
    padding: 4px 16px;
    width: 300px;
    // background-color: pink;
    float: left;
    height: 95px;
  }
  .img {
    width: 62px;
    height: 95px;
    background-color: #fff;
    // border-left: 2px solid #fafafa;
    float: right;
    margin-top: 12px;
    position: relative;
    left: 80px;
    bottom: 104px;
  }
  .img .tu1 {
    width: 47px;
    height: 35px;
    position: absolute;
    top: 13px;
    right: 5px;
  }
  .tiem-top {
    font-size: 12px;
    color: red;
    margin-bottom: 10px;
    top: 8px;
    position: absolute;
    left: 20px;
  }
  .tiem-bottom {
    font-size: 12px;
    color: red;
    top: 28px;
    position: absolute;
    left: 28px;
  }
  .img .tu2 {
    top: 55px;
    position: absolute;
    left: 6px;
    width: 54px;
    height: 33px;
  }
  .di1 {
    // margin-bottom: 10px;
  }
  .van-loading {
    width: 100%;
    height: 100px;
    // background-color: pink;
    // position: relative;
    // left: -146px;
    // top: 96px;
  }
}
</style>
